/* https://tailwindcss.com/docs/adding-custom-styles#adding-custom-utilities */
@utility scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
  &::-webkit-scrollbar {
    display: none;
  }
}

@utility required-mark {
  &::before {
    content: '*';
    @apply text-red-500;
  }
}

@utility bg-asset-grid {
  background-color: var(--asset-grid-bg-color);
  background-image:
    linear-gradient(45deg, var(--bg-asset-grid-color) 25%, transparent 25%),
    linear-gradient(-45deg, var(--bg-asset-grid-color) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--bg-asset-grid-color) 75%),
    linear-gradient(-45deg, transparent 75%, var(--bg-asset-grid-color) 75%);
  background-size: 12px 12px;
  background-position:
    0px 0px,
    0px 6px,
    6px -6px,
    -6px 0px;
}
